<template>
	<view class="model flex_c">
		<view class="avatar">
			<view class="avatar_box flex_r_around">
				<image src="https://qiniu-cdn.maeiyun.com/image_cropper_1727769434645.jpg" mode="aspectFill"></image>
			</view>
			<view class="loading flex_r_around">
				<view class="loading_header"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		},

		onLoad() {

		},


	}
</script>

<style lang="less" scoped>
	.model {
		padding: 32rpx;
	}

	.avatar {
		position: relative;
		width: 200rpx;
		height: 200rpx;

		.avatar_box {
			position: relative;
			z-index: 91;
			width: 200rpx;
			height: 200rpx;

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 80rpx;
			}
		}


		.loading {
			position: absolute;
			top: 0;
			left: 0;
			width: 200rpx;
			height: 200rpx;

			.loading_header {
				width: 140rpx;
				height: 140rpx;
				border-radius: 80rpx;
				background: deepskyblue;
				animation: animal 1s infinite linear;
				transform-origin: center center;
			}
		}


		@keyframes animal {
			0% {
				transform: scale(0.8);
				opacity: 0.6;
			}

			100% {
				transform: scale(2);
				opacity: 0;
			}
		}
	}
</style>